<template>
  <div class="business">
    <div class="business_main">
      <h2>
        京粉客致力于京东商家与京挑客之间建立直接沟通,商家如有需求敬请联系QQ:2021328767
      </h2>
      <el-row :gutter="20" v-loading="loading">
        <el-col
          :span="12"
          v-for="(item, index) in businessList"
          :key="index"
          style="padding:10px"
        >
          <el-card :body-style="{ padding: '10px' }">
            <div class="business_box">
              <img :src="item.goods_img" class="image" />
              <div class="right_box">
                <a :href="'https://item.jd.com/'+item.goods_id+'.html'" target="_blank" rel="noopener noreferrer"><p class="title">{{ item.goods_title }}</p></a> 
                <p class="requrement">商家要求:{{ item.goods_requirement }}</p>
                <p class="phone">联系方式:{{ item.contact_phone }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div style="width:100%;margin:10px auto;">
        <!-- 分页器 -->
        <!-- @size-change="handleSizeChange" -->
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-size="50"
          :pager-count="11"
          layout="total, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
import footerbox from '@/components/footerbox.vue'

import { getShopWallList } from '@/api/business'
export default {
  name: 'Business',
  components: {
    footerbox
  },
  data() {
    return {
      loading:false,
      businessList: [],
      currentPage: 1,
      count: 0
    }
  },

  computed: {},
  created() {
    this.getShopWallList(50)
  },
  mounted() {},
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      //   this.searchform.page = val;
      this.getShopWallList(50)
    },
    //获取商家墙列表
    getShopWallList(pagesize) {
      this.loading=true
      getShopWallList({
        page: this.currentPage,
        pagesize: pagesize
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('商家墙返回', res)
            this.count = res.data.count
            this.businessList = res.data.data
            this.loading=false
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.business {
  position: relative;
  .business_main {
    width: 1280px;
    // min-height: 700px;
    margin: 0 auto;
    h2 {
      font-weight: bold;
      color: orangered;
      padding: 10px 0;
    }
    .business_box {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .image {
        width: 220px;
      }
      .right_box {
        width: 370px;
        text-align: left;
        .title {
          font-size: 18px;
          font-weight: bold;
          height: 60px;
          color: #000;
        }
        .requrement {
          font-size: 18px;
          color: #81a9ff;
          height: 120px;
        }
        .phone {
          font-size: 18px;
          color: #000;
          height: 40px;
        }
      }
    }
  }
}
</style>
